<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京站智能网格化管理系统</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/common.css">
    <link rel="stylesheet" href="../lib/css/iconFont/iconfont.css">  
    <link rel="stylesheet" href="../lib/css/pagination.css">
    <!-- <link rel="stylesheet" type="text/css" href="../lib/css/station.css"> -->
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/loading.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/newcount.css">
</head>
<body>
<div class="station_grid wraper">
    <div class="searchwrap">
        <!-- 日期时间 -->
        <div class="searchelm searchtime1 none">
            <input type="text" id="datetimepicker" class="search_control" name="ptime_start">
            <input type="text" id="datetimepicker2" class="search_control" name="ptime_end">
            <div class="select2_wrap" style="min-width:20%;max-width:60%;">
                <select name="wxdep" id="wxdep" class="search_control wxdep" style="width:100%">
                </select>
            </div>
            <!-- <select name="wxdep" id="wxdep" class="select_option wxdep" style="width:12rem;">
                <option value="1" checked>防修车间</option>
                <option value="2">信息化车间车间</option>
            </select> -->
            <input type="button" value="查询" id="lookUp1" class="lookUp" style="left:66rem;"/>
        </div>
        <!-- 月季年 -->
        <div class="searchelm searchtime2">
            <select name="" class="select_option select_option0 select_option3" id="select_year">
                <option value="1" class="option_year">年</option>
                <option value="2" class="option_quart">季</option>
                <option value="3" class="option_month">月</option>
            </select>
            <select name="" class="select_option" id="select_month">
                <!-- <option value="">2017</option> -->
            </select>
            <select name="" class="select_option select_quarter3" id="select_quarter">
                <!-- <option value=""></option> -->
            </select>
            <input type="button" value="查询" id="lookUp2" class="lookUp" />
        </div>
        <!-- 图表导出 切换 -->
        <div class="tabbar clearfix">
            <ul class="tab">
                <li class="tab_li tab_li_click"><i class="icon iconfont icon-tubiao"></i>图形</li>
                <li class="tab_li"><i class="icon iconfont icon-biaoge"></i>表格</li>
                <li class="tab_li" id="export_file"><i class="icon iconfont icon-daochu"></i>导出</li>
            </ul>
        </div> 
    </div>   
    <!-- 信息和房修切换 -->
    <div class="change">
        <ul class="ul_change">
            <li class="li_change li_change_color" value="0" id="total">全部</li>
            <li class="li_change" value="2" id="info">信息化车间</li>
            <li class="li_change" value="1" id="house">房修车间</li>
        </ul>
    </div>
    <!-- echarts统计图表 -->
    <div class="main_content">
        <!-- 各维修岗位工作量 -->
        <div class="mcharts nan" id="chart" style="width:100%;height:100%;"></div>
        <!-- <div class="require nan" id="require"  style="width: 100%;height: 65%;"></div> -->
        <!-- 人员表格 -->
        <div class="station_shaow_detail nan" style="display:none">
            <table class="station_shaow_detail_table">
                <caption style="font-size: 2.4rem;">各维修岗位工作量</caption>
            </table>
                <div class="M-box1" style="font-size:10px;text-align:center;" id="page_string">
            </div>
        </div>
        <div class="lds-css block">
            <div class="lds-dual-ring">
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- <script type="text/javascript" src="/assets/js/jquery.1.10.1.js"></script> -->
<script type="text/javascript" src="../lib/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../lib/js/base.js"></script>
<script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
<script type="text/javascript" src="../lib/js/jquery.pagination.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/echarts.js"></script>
<script type="text/javascript" src="../lib/js/count.js"></script>
<script  type="text/javascript">
var page = 1,postDep='1',departmentId=''
var chart=echarts.init(document.getElementById("chart"));

//查询
$("#lookUp2").click(function () {
    //统计表
    var type = $("#select_year option:selected").val();
    var year = $("#select_month option:selected").val();
    var quarter = $("#select_quarter option:selected").val();
    var _data = {
        type:type,
        year:year,
        month:'',
        quarter:'',
        department_id:departmentId
    }

    if(type == '1'){
        //year
        _data.month = ''
        _data.quarter = ''

    }else if(type == '2'){
        //quarter
        _data.month = ''
        _data.quarter = quarter
    }else if(type == '3'){
        //month
        _data.month = quarter
        _data.quarter = ''
    }

    devicePostRepairChart(_data)
});
$("#lookUp1").click(function () {
    var _data = {
        'page':page,
        'start':$('#datetimepicker').val(),
        'end':$('#datetimepicker2').val(),
        'departments': $('.wxdep').val()?$('.wxdep').val():[]
        // 'time':<?php echo time();?>,
    };
    devicePostRepairTable(_data)
});
$('.li_change').on('click',function(elm){
    var $this = $(this)
    //var _ids = $this.attr('value')
    departmentId = $this.attr('value')
    $("#lookUp2").trigger('click')
    // if(_ids == '1'){
        
    // }else if(_ids == '2'){

    // }else if(_ids == '3'){
        
    // }
    
})
//统计图
function devicePostRepairChart(data){
    $('.lds-css').addClass('block')
    //统计图
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.count+'device_repair_chart',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.lds-css').removeClass('block')
            // 根据数据库取到结果拼接现在结果
            var _data =res.data
            //console.log(_data)
            _data.title = '各维修岗位工作量'
            _data.legend=['工作量']
            refreshChart(_data);
        }
    });
}
//表格
function devicePostRepairTable(data){
    $('.lds-css').addClass('block')
    var _data = data
    $.ajax({
        url: serverUrl.base+serverUrl.count+'device_repair_table',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            $('.lds-css').removeClass('block')
            // 根据数据库取到结果拼接现在结果
            var _data = res.data
            if(res.code==1){
                _data=[]
            }
            $('.station_shaow_detail_table').createTable({data:_data,columns:[
                {name:'序号',field:'',ids:1,w:'4rem'},
                {name:'岗位',field:'wx_post_name',w:'4rem'},
                {name:'岗位所属部门',field:'department_name',w:'10rem'},
                {name:'上报次数',field:'report_num',w:'10rem'},
                {name:'维修次数',field:'repair_num',w:'8rem'}
            ]})
            $("#page_string").html(res.result_page);
            
        }
    });
}

//统计图 样式
function refreshChart(data){
    var _data=data
    //console.log(_data)
    var _canRender=false
    for(var i=0;i < _data.chartxdata.length;i++){
        if(_data.chartxdata[i].value != 0){
            _canRender = true
            break;
        }
    }
    if(_canRender){
    chart.setOption({
    title:{
        text:_data.title,
        x:"center",
        y:"0%",
        textStyle:{
            color:"#fff",
            fontSize:30,
            // textAlign:"center"
        }
    },
    tooltip:{
        trigger:"item",
        formatter:"{a}<br/>{b}：{c}({d}%)"
    },
    legend:{
        orient:_data.legend[0],
        x:"86%",
        y:"20%",
        data:_data.chartxname,
        textStyle:{
            color:"#fff",
            fontSize:16
        }
    },
    calculabel:true,
    series:[{
        name:_data.legend[0],
        type:"pie",
        radius:"76%",
        center:["50%","50%"],
        label:{
        normal:{
            show:true,
            textStyle:{
                fontSize:16
            }
        },
        emphasis:{
            show:true
        }
        },
        lableLine: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data:_data.chartxdata,
        itemStyle:{
            normal:{
                label:{
                    show:function(params){
                        if(params.value==0.00){
                        return false
                        }
                        
                    },
                    labelLine:{
                        show:function(params){
                            if(params.value==0.00){
                                return false
                            }
                        }
                    }
                }
            },
            emphasis:{
                shadowBlur:10,
                shadowOffsetX:0,
                shadowColor:"rgba(0,0,0,0.5)"
            }
        }
    }]
    
    })
    }else{
        chart.clear()
       // alert('查询不到数据')
    }
}
$(function(){
    time()
})
function common_request(elm){
    if(arguments[0]){
        page = arguments[0]
    }else{
        page = 1
    }
    $("#lookUp2").click()
    $("#lookUp1").click()    
}
//查询
function search_(){
    page = 1 ;
    common_request(1);  
}
//tab初始化
$('.tab .tab_li').each(function(index,elm){
    //console.log(index,elm)
    $(this).data('val',index)
})
//图表切换后的操作
$('.tab_li').on('click',function(elm){
    var $this = $(this)
    var _ids = $this.data('rel')?$this.data('rel'):$this.index()
    if(_ids== '0'){
        $('.searchtime1').hide()
        $('.searchtime2').show()
        $('.change').show()
        $(".educe").removeClass("addli")
    }else if(_ids== '1'){
        $('.searchtime1').show()
        $('.searchtime2').hide()
        $(".educe").addClass("addli");

        $('.change').hide()
    }else if(_ids== '2'){
        //导出按钮
        var _data = {
            'page':page,
            'start':$('#datetimepicker').val(),
            'end':$('#datetimepicker2').val(),
            'departments': $('#wxdep').val()
            // 'time':<?php echo time();?>,
        };
        var _url=serverUrl.base + serverUrl.countD + 'device_repair_table?start='+encodeURIComponent(_data.start)+'&end='+encodeURIComponent(_data.end)+'&departments='+(encodeURIComponent(_data.departments) == 'null'?'':encodeURIComponent(_data.departments))
        window.location.href = _url;return;
    }
})
$('.wxdep').rpSelect({url:serverUrl.base+serverUrl.count+serverUrl.dep,multiple:true,placeholder:'请选择设备管理部门'})

</script>
</html>

